import React, { useEffect, useState } from "react";
import { Input, Tree, Button, Tooltip, Popconfirm } from "antd";
import { DeleteOutlined, FormOutlined, PlusOutlined } from "@ant-design/icons";
import { useAppDispatch, useAppSelector } from "@/store";
import {
  get_sys_dict_type_tree,
  select_active_dict_type_id,
  select_dict_type_tree,
  set_active_dict_type_id,
  set_is_show_dict_type_modal,
} from "@/store/slice/SysDict";
import { deleteSysDictTypeById } from "@/api/sys/sysDict";

const { Search } = Input;

const DictTreeList: React.FC = () => {
  const dispatch = useAppDispatch();
  const [searchValue, setSearchValue] = useState("");
  const dictTypeTree = useAppSelector(select_dict_type_tree);
  const activeDictTypeId = useAppSelector(select_active_dict_type_id);
  let treeData = dictTypeTree.filter((item: SysDictDataEntityType) =>
    searchValue ? item.title.indexOf(searchValue) !== -1 : item
  );

  useEffect(() => {
    dispatch(get_sys_dict_type_tree()).then((res) => {
      const treeData = res.payload as SysDictDataEntityType[];
      dispatch(set_active_dict_type_id(treeData[0].id));
    });
  }, []);

  function treeNodeRender(node: any) {
    return (
      <div className="tree-content">
        <div className="tree-content-left">{node.title}</div>
        <div className="tree-content-right">
          <Tooltip title="编辑">
            <Button
              type="link"
              icon={<FormOutlined />}
              onClick={(e) => {
                e.stopPropagation();
                handleDictTypeEditClick(node);
              }}
            />
          </Tooltip>
          <Tooltip title="删除">
            <Popconfirm
              title="是否确定删除当前数据?"
              okText="是"
              cancelText="否"
              onConfirm={() => handleDictTypeDeleteClick(node)}
            >
              <Button
                danger
                type="text"
                icon={<DeleteOutlined />}
                onClick={(e) => {
                  e.stopPropagation();
                }}
              />
            </Popconfirm>
          </Tooltip>
        </div>
      </div>
    );
  }
  function onSelectTree(selectedKeys: React.Key[], info: any) {
    dispatch(set_active_dict_type_id(selectedKeys[0]));
  }
  function handleAddDictTypeAddClick() {
    dispatch(
      set_is_show_dict_type_modal({
        show: true,
        mode: 1,
        title: "新增字典类型",
        data: {},
      })
    );
  }
  function handleDictTypeEditClick(node: any) {
    dispatch(
      set_is_show_dict_type_modal({
        show: true,
        mode: 2,
        title: "编辑字典类型",
        data: node.other,
      })
    );
  }
  function handleDictTypeDeleteClick(node: any) {
    deleteSysDictTypeById(node.key);
    dispatch(get_sys_dict_type_tree());
  }
  return (
    <>
      <div className="tree-header">
        <div className="tree-header-left">字典类型</div>
        <div className="tree-header-right">
          <Tooltip title="新增">
            <Button
              type="primary"
              size="small"
              shape="circle"
              icon={<PlusOutlined />}
              onClick={handleAddDictTypeAddClick}
            />
          </Tooltip>
        </div>
      </div>
      <Search
        allowClear
        style={{ marginBottom: 8 }}
        placeholder="Search"
        onChange={(e) => setSearchValue(e.target.value)}
      />
      <Tree
        checkable={false}
        defaultSelectedKeys={[activeDictTypeId]}
        onSelect={onSelectTree}
        titleRender={treeNodeRender}
        treeData={treeData}
      />
    </>
  );
};

export default DictTreeList;
